<template>
  <a-dropdown :trigger="['click']">
    <a-tooltip :title="t('设置')" placement="topRight">
      <SettingOutlined class="btn" />
    </a-tooltip>
    <template #overlay>
      <a-menu>
        <a-checkbox-group
          :value="selectedKeys"
          @update:value="(v) => emit('update:selected-keys', v)"
        >
          <vue-draggable
            :model-value="columns"
            @update:model-value="(v) => emit('update:columns', v)"
            direction="vertical"
            :animation="300"
          >
            <div
              v-for="item in columns"
              class="move-item"
              :key="((item as TableColumnType).dataIndex as string)"
            >
              <a-checkbox :value="(item as TableColumnType).dataIndex">
                <a-menu-item>
                  <span>
                    {{
                      isFunction(item.title)
                        ? (item.title as any)()
                        : item.title
                    }}
                  </span>
                </a-menu-item>
              </a-checkbox>
            </div>
          </vue-draggable>
        </a-checkbox-group>
      </a-menu>
    </template>
  </a-dropdown>
</template>
<script lang="ts" setup>
import { toRefs } from "vue";
import { useI18n } from "vue-i18n";
import { isFunction } from "lodash";
import type { TableColumnsType, TableColumnType } from "ant-design-vue";
import { VueDraggable } from "vue-draggable-plus";

interface Props {
  /**表格列 */
  columns: TableColumnsType;
  /**选中列 */
  selectedKeys: string[];
}
const props = defineProps<Props>();
const emit = defineEmits(["update:columns", "update:selected-keys"]);
const { t } = useI18n();
const { columns, selectedKeys } = toRefs(props);
</script>
<style lang="less" scoped>
.ant-checkbox-group {
  display: block;
}
.move-item {
  user-select: none;
  padding: 0 4px;
}
</style>
